import React, { PureComponent, Fragment } from 'react'
import { DatePicker } from 'antd'
import { connect } from 'dva'
import moment from 'moment'
import PateoStandardTable from '@/common/PateoTable/PateoStandardTable'

const dateFormat = 'YYYY-MM-DD'

@connect(({ common, loading }) => ({
  common,
  loading: loading.models.common,
}))
export default class WheelPathTab extends PureComponent {
  componentDidMount() {
    this.getTableData()
  }

  getTableData = (value) => {
    const { dispatch, vin } = this.props
    dispatch({
      type: 'common/listDataGet',
      payload: {
        url: '/vehicle/findwheelpath',
        vin,
        searchDate: value ? value.format(dateFormat) : moment().format(dateFormat),
      },
    })
  }

  render() {
    const { common: { listData }, loading, vin } = this.props
    const columns = [
      {
        width: '15%',
        title: '起止时间',
        dataIndex: 'time',
        render: (text, record) => {
          return `${moment(record.startTime).format('HH:mm')}-${moment(record.endTime).format('HH:mm')}`;
        },
      }, {
        width: '15%',
        title: '耗时',
        dataIndex: 'driverTime',
        render: (text) => `${text} min`
      }, {
        width: '15%',
        title: '里程（KM）',
        dataIndex: 'eachMileage',
      }, {
        width: '15%',
        title: '油耗（L）',
        dataIndex: 'eachFuel',
        render: (text) => text ? text / 1000000 : ''
      }, {
        width: '20%',
        title: '起始地点',
        dataIndex: 'startPointName',
      }, {
        width: '20%',
        title: '停止地点',
        dataIndex: 'endPointName',
      },
    ]

    const tableProps = {
      columns,
      dataSource: listData,
      size: 'small',
      loading,
      pagination: false,
    }

    return (
      <Fragment>
        <span>选择日期：</span>
        <DatePicker
          defaultValue={moment()}
          format={dateFormat}
          onChange={this.getTableData}
          allowClear={false}
          style={{ width: 200, marginBottom: 20 }}
        />
        <PateoStandardTable
          tableProps={tableProps}
          fetchUrl='common/listDataGet'
          parameterUrl='/vehicle/findwheelpath'
          formValues={{ vin }}
        />
      </Fragment>
    )
  }
}
